<template>
  <div class="pagination">
    <fx-card title="基础用法">
      <fx-pagination :total="30"></fx-pagination>
      <fx-pagination :total="100"></fx-pagination>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="设置最大页码按钮数">
      <fx-pagination :total="100" :page-count="3"></fx-pagination>
      <fx-pagination :total="100" :page-count="7"></fx-pagination>
      <template #hide>
        <pre v-highlight="pageCount"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="带边框">
      <fx-pagination :total="100" size="large" border></fx-pagination>
      <fx-pagination :total="100" size="middle" border></fx-pagination>
      <fx-pagination :total="100" size="default" border></fx-pagination>
      <fx-pagination :total="100" size="mini" border layout="prev,pager,next,jumper,total"></fx-pagination>
      <template #hide>
        <pre v-highlight="border"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="自定义分页大小">
      <fx-pagination :total="100" :page-size="20"></fx-pagination>
      <fx-pagination :total="100" :page-size="[10,50,100,150]" layout="prev,pager,next,sizes"></fx-pagination>
      <template #hide>
        <pre v-highlight="size"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="自定义布局 (根据选择顺序显示分页)">
      <fx-pagination :total="100" :page-size="[10,50,100,150]" :layout="layoutText.join(',')" :is-more="isMore" border/>
      <fx-checkbox-group v-model="layoutText">
        <fx-checkbox-button label="prev"></fx-checkbox-button>
        <fx-checkbox-button label="pager"></fx-checkbox-button>
        <fx-checkbox-button label="next"></fx-checkbox-button>
        <fx-checkbox-button label="sizes"></fx-checkbox-button>
        <fx-checkbox-button label="jumper"></fx-checkbox-button>
        <fx-checkbox-button label="total"></fx-checkbox-button>
      </fx-checkbox-group>
      <span class="ml10">{{ layoutText.join(',') }}</span>
      <div class="mt10">
        <fx-button @click="isMore=!isMore">{{ isMore ? '隐藏' : '显示' }}更多按钮</fx-button>
      </div>
      <template #hide>
        <pre v-highlight="layout"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="自定义文字">
      <fx-pagination :total="100" prev-text="上一页" next-text="下一页"></fx-pagination>
      <fx-pagination :total="200" prev-text="前一个" next-text="后一个" border></fx-pagination>
      <fx-pagination :total="200">
        <template #previous>
          <fx-link type="primary">插槽前一个</fx-link>
        </template>
        <template #next>
          <fx-link type="primary">插槽后一个</fx-link>
        </template>
      </fx-pagination>
      <template #hide>
        <pre v-highlight="text"><code></code></pre>
      </template>
    </fx-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'viewPagination',
  setup () {
    const layoutText = ref<string[]>(['prev', 'pager', 'next'])
    const isMore = ref<boolean>(true)
    const base = `<fx-pagination :total="30"></fx-pagination>
<fx-pagination :total="100"></fx-pagination>`
    const pageCount = `<fx-pagination :total="100" :page-count="3"></fx-pagination>
<fx-pagination :total="100" :page-count="7"></fx-pagination>`
    const border = `<fx-pagination :total="100" size="large" border></fx-pagination>
<fx-pagination :total="100" size="middle" border></fx-pagination>
<fx-pagination :total="100" size="default" border></fx-pagination>
<fx-pagination :total="100" size="mini" border  layout="prev,pager,next,jumper,total"></fx-pagination>`
    const size = `<fx-pagination :total="100" :page-size="20"></fx-pagination>
<fx-pagination :total="100" :page-size="[10,50,100,150]" layout="prev,pager,next,sizes"></fx-pagination>`
    const layout = `<fx-pagination :total="100" :page-size="[10,50,100,150]" :layout="layoutText.join(',')" :is-more="isMore" border/>
<fx-checkbox-group v-model="layoutText">
  <fx-checkbox-button label="prev"></fx-checkbox-button>
  <fx-checkbox-button label="pager"></fx-checkbox-button>
  <fx-checkbox-button label="next"></fx-checkbox-button>
  <fx-checkbox-button label="sizes"></fx-checkbox-button>
  <fx-checkbox-button label="jumper"></fx-checkbox-button>
  <fx-checkbox-button label="total"></fx-checkbox-button>
</fx-checkbox-group>
<span class="ml10">{{ layoutText.join(',') }}</span>
<div class="mt10">
  <fx-checkbox v-model="isMore">{{ isMore ? '隐藏' : '显示' }}更多按钮</fx-checkbox>
</div>

export default defineComponent({
    setup() {
        const layoutText = ref<string[]>(['prev', 'pager', 'next'])
        const isMore = ref<boolean>(true)
    }
})`
    const text = `<fx-pagination :total="100" prev-text="上一页" next-text="下一页"></fx-pagination>
<fx-pagination :total="200" prev-text="前一个" next-text="后一个" border></fx-pagination>
<fx-pagination :total="200">
  <template #previous>
    <fx-link type="primary">插槽前一个</fx-link>
  </template>
  <template #next>
    <fx-link type="primary">插槽后一个</fx-link>
  </template>
</fx-pagination>`

    return {
      layout,
      isMore,
      layoutText,
      base,
      pageCount,
      border,
      size,
      text
    }
  }
})
</script>

<style scoped lang="scss">
.pagination {
}
</style>
